<template>
  <div class="role-detail-pre">
    <vx-title-bar :list="['修改角色录入', '修改角色确认', '修改角色结果']" current="1" />
    <ui-form :model="form" class="vx-form" ref="form" :rules="rules">
      <ui-form-item label="角色编号"> {{ form.id }}</ui-form-item>
      <ui-form-item label="角色名称" prop="name">
        <ui-input type="text" placeholder="请输入角色名称" v-model="form.name"> </ui-input>
      </ui-form-item>
      <ui-form-item label="菜单权限">
        <ui-tree
          ref="tree"
          :data="menulist"
          default-expand-all
          show-checkbox
          check-on-click-node
          node-key="id"
          :default-checked-keys="checkedKeys"
          :props="defaultProps"
          @check-change="handleNodeClick"
        >
        </ui-tree>
      </ui-form-item>
      <ui-form-item label=" ">
        <ui-button class="default-btn" @click="$router.go(-1)">返回</ui-button>
        <ui-button class="primary-long-btn" @click="confirmTrue">确认</ui-button>
      </ui-form-item>
    </ui-form>
  </div>
</template>

<script>
let str = '';
export default {
  name: 'role-detail-pre',
  data() {
    return {
      form: (this.getData() && this.getData().role) || {},
      menulist: (this.getData() && this.getData().menuTree) || [],
      rules: {
        name: { required: true, message: '请输入角色名称', trigger: ['change', 'blur'] },
      },
      checkedKeys: (this.getData() && this.getData().checkedKeys) || [], //已授权的菜单列表
      defaultProps: {
        //树形组件绑定的属性
        children: 'children',
        label: 'name',
        disabled: this.disabledFn, //没有选中的禁用
      },
    };
  },
  methods: {
    /**
     * 查看选中的
     * item  选中的对象
     * check 是否选中 返回true false
     */
    handleNodeClick(item, check) {
      if (check) {
        this.checkedKeys.push(item.id);
      } else {
        if (this.checkedKeys.indexOf(item.id) !== -1) {
          this.checkedKeys.splice(this.checkedKeys.indexOf(item.id), 1);
        }
      }
    },
    /**
     * 提交表单
     */
    async confirmTrue() {
      this.$refs['form'].validate(async (valid) => {
        // 表单校验通过
        if (valid) {
          let checkKeys = [];
          this.$refs.tree.getCheckedNodes().forEach((item) => {
            checkKeys.push(item.id);
          });
          this.menulist.forEach((item) => {
            if (item.children) {
              item.children.forEach((val) => {
                if (checkKeys.indexOf(val.id) !== -1) {
                  checkKeys.indexOf(item.id) < 0 ? checkKeys.push(item.id) : '';
                }
                if (val.children) {
                  val.children.forEach((res) => {
                    if (checkKeys.indexOf(res.id) !== -1) {
                      checkKeys.indexOf(item.id) < 0 ? checkKeys.push(item.id) : '';
                      checkKeys.indexOf(val.id) < 0 ? checkKeys.push(val.id) : '';
                    }
                  });
                }
              });
            }
          });
          str = checkKeys.join(',');
          console.log(checkKeys);
          if (str !== '') {
            this.setData({
              role: this.form,
              menuIds: str,
              menuTree: this.menulist,
              checkedKeys: this.checkedKeys,
            });
            this.$router.push({
              path: '/system/role/role-detail/role-detail-conf',
            });
          } else {
            this.$message.error('至少选择一个菜单权限');
          }
        } else {
          this.$nextTick(() => {
            document.querySelectorAll('.is-error')[0].querySelector('input').focus();
          });
        }
      });
    },
  },
};
</script>
